<template>
	<div style="border: 1px solid #ccc;">
		<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
		<Editor style="height: 100%;min-height: 100px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
			@onCreated="onCreated" />
	</div>
</template>

<script>
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'
	import '@wangeditor/editor/dist/css/style.css'
	export default {
		porps:{
			disabled:{
				type:Boolean,
				default:false
			}
		},
		components: {
			Editor,
			Toolbar
		},
		data() {
			return {
				editor: null,
				html: '',
				toolbarConfig: {
				},
				editorConfig: {
					autoFocus:false,
					placeholder: '请输入内容...'
				},
				mode: 'default', // or 'simple'
			}
		},
		watch:{
			disabled(){
				// const editor = this.editor
				// if (editor == null) return
				// if(editor.isDisabled()){
				// 	editor.disable()
				// }else{
				// 	editor.enable()
				// }
			},
		},
		methods: {
			onCreated(editor) {
				this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
			},
		},
		beforeDestroy() {
			const editor = this.editor
			if (editor == null) return
			editor.destroy() // 组件销毁时，及时销毁编辑器
		}
	}
</script>